@import "../../../../styles/base";
$themeBlue: #1558d2;
$themePurple: #9456FD;

.tabs-wrap {
  width: 95vw;
  margin: 0 auto;
  overflow-x: auto;
}

.tabs {
  display: flex;
  position: relative;
  margin: 0;
  padding: 0 0 4px;
  transition: 0.2s all linear;

  .item {
    position: relative;
    padding: 4vw;
    font-size: tovw(12, 3.6);
    color: #000;
    line-height: 1;
    transition: 0.2s all linear;
    cursor: pointer;
    list-style: none;
    user-select: none;

    p {
      white-space: nowrap;
    }

    .dir-2 {
      height: tovw(18, 3.6);
      background: #F2F4F6;
      border-radius: tovw(9, 3.6);
      padding: 0 tovw(9, 3.6);
      white-space: nowrap;
    }
  }

  .line {
    width: 100%;
    position: relative;

    &::before {
      content: "";
      position: absolute;
      top: 10px;
      left: 50%;
      width: 0;
      height: 100%;
      background: none;
      border-bottom: 2px solid $themePurple;
      transition: 0.2s all linear;
      user-select: none;
    }
  }

  .item.active .line::before {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
    transition-delay: 0.1s;
    border-bottom-color: $themePurple;
    z-index: -1;
  }

  .item.active ~ .item.line::before {
    left: 50%;
  }

  .item.active {
    color: $themePurple;

    &.dir-2 {
      background: #C8A7FF;
      color: #FFFFFF;
    }
  }

  &.noLine {
    .item.active .line::before {
      display: none;
    }
  }

  &.tabs-1 {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
  }

  &.tabs-deep-0 {
    .item {
      font-size: tovw(16, 3.6);
      color: #979797;
      letter-spacing: 0;
      text-align: center;
      font-weight: 500;

      &.active {
        color: #26292D;
        .line::before {
          width: 20px;
        }
      }
    }
  }

  &.tabs-deep-1 {
    li {
      p {
        white-space: nowrap;
      }
    }
  }

  .item-wrap {
    position: relative;

    .item-content {
      position: relative;

      .product-card {
        height: 300px
      }
    }
  }
}
